@import '@/styles/color.less';
@import '@/styles/token.less';

.preview {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: @colorBgContainer;
  border-radius: 6px;
  overflow: hidden;
}

// .previewHeader {
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
//   padding: 8px 12px;
//   background: @colorFillQuaternary;
//   border-bottom: 1px solid @colorBorder;
//   min-height: 36px;
// }

// .headerLeft {
//   flex: 1;
// }

// .titleSection {
//   display: flex;
//   align-items: center;
//   gap: 8px;
// }

// .title {
//   font-size: @fontSize;
//   font-weight: @fontWeightStrong;
//   color: @colorTextBase;
// }

// .statusBadge {
//   font-size: 12px;
//   color: @colorSuccess;
//   background: @colorSuccessBg;
//   padding: 2px 8px;
//   border-radius: 4px;
//   border: 1px solid @colorSuccessBorder;
// }

// .loadingBadge {
//   display: flex;
//   align-items: center;
//   gap: 4px;
//   font-size: 12px;
//   color: @colorWarning;
//   background: @colorWarningBg;
//   padding: 2px 8px;
//   border-radius: 4px;
//   border: 1px solid @colorWarningBorder;
// }

// .lastUpdated {
//   font-size: 12px;
//   color: @colorTextTertiary;
// }

// .errorBadge {
//   display: flex;
//   align-items: center;
//   gap: 4px;
//   font-size: 12px;
//   color: @colorError;
//   background: @colorErrorBg;
//   padding: 2px 8px;
//   border-radius: 4px;
//   border: 1px solid @colorErrorBorder;
//   cursor: pointer;
//   transition: all 0.2s ease;

//   &:hover {
//     background: @colorErrorBgHover;
//     border-color: @colorErrorBorderHover;
//   }
// }

// .headerRight {
//   display: flex;
//   align-items: center;
//   gap: 8px;
// }

// .refreshButton {
//   display: flex;
//   align-items: center;
//   gap: 4px;
// }

// .errorContainer {
//   padding: 16px;
//   background: @colorBgContainer;
// }

.previewContainer {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.previewIframe {
  width: 100%;
  height: 100%;
  border: none;
  background: @colorBgContainer;
}
